<template>
    <div>
        <van-list v-model="loading"  :finished="finished"  finished-text="我是有底线的"  @load="onload" :immediate-check ="false">

            <van-cell v-for="data in datalist" :key="data.filmId" @click="handleChangePage(data.filmId)">
                <!-- <router-link to="/detail">{{data}}</router-link> -->
                <img :src="data.poster" alt="">
                <div class="title ">{{data.name}}</div>
                <div class="content"><div :class="data.grade?'':'hiden'">观众评分：<span style="color:red">{{data.grade}}</span></div>
                <div class="actors">主演：{{data.actors | actorsFilter}}</div>
                <div>
                    {{data.nation}} | {{data.runtime}}分钟
                </div>
                </div>
            </van-cell>
       </van-list>
    </div>
</template>
<script>
import axios from "axios"
import Vue from "vue"
import http from "@/util/https"
Vue.filter("actorsFilter",(data)=>{
    // console.log();
    if(data===undefined) return '暂无主演'
    return data.map(item => item.name).join(' ')
})
export default {
    data(){
        return {
            datalist:[],
            loading:false,
            finished:false,
            current:1,
            total:0
        }
    },
    mounted(){
        http({ 
        url:`/gateway?cityId=421100&pageNum=${this.current}&pageSize=10&type=1&k=164941`,
        headers:{
            'X-Host':'mall.film-ticket.film.list'
        }
        }).then((res) =>{
            console.log(res);
            this.datalist =  res.data.data.films
            this.total = res.data.data.total
        })
    },
    methods:{
        onload(){
            //禁用懒加载
            if(this.datalist.length === this.total && this.total !==0){
                this.finished = true
                return
            }
            console.log("到底了");
            this.current++
             http({ 
              url:`/gateway?cityId=421100&pageNum=${this.current}&pageSize=10&type=1&k=164941`,
               headers:{
              'X-Host':'mall.film-ticket.film.list'
                }
        }).then((res) =>{
            console.log(res);
            this.datalist = [...this.datalist,...res.data.data.films]
            this.loading = false
        })
        },
        handleChangePage(id){
            // console.log(id);
            // // location.href = '#/detail'
            // this.$router.push(`/detail/${id}`)
            // 通过路径跳转 

            // 2.通过命名跳转
            this.$router.push({
                name:"zyxdetail",
                params:{
                    id
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.van-list{
    .van-cell{
        overflow: hidden;
        padding: .8333rem;
        img{
            float: left;
            width: 3.6667rem;
        }
        .title{
            font-size: 16px;
        }
        .content{
            font-size: 13px;
            color: gray;
            .actors{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
}
.hiden{
    visibility: hidden;
}
</style>